<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 模态框</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary edit-btn" >
        编辑姓名
    </button>

    <!-- 
        目标：使用js控制弹框 显示和隐藏
        1：要创建弹框对象
        2：调用弹框对象的内置方法
           .show() 显示
           .hide() 隐藏
      
   -->
    <div class="modal fade my-box"  tabindex="-1" >
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title " >请输入姓名</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                   <form action="">
                        <span>姓名：</span>
                        <input type="text" class="username">
                   </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary save-btn">保存</button>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script>
    const modalDom = document.querySelector('.my-box')
    const myModal = new bootstrap.Modal(modalDom)
    console.log(modalDom);

    document.querySelector(".edit-btn").addEventListener("click",function () {
        document.querySelector(".username").value = "king";
        myModal.show()

    })

    document.querySelector(".save-btn").addEventListener("click",function () {
        const username =  document.querySelector(".username").value
        console.log("模拟把姓名保存到服务器上",username);
        myModal.hide()

    })
    </script>
</body>

</html>